<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="topBox">
					<image class="localImage" :src="imgapi+plotDetail.banner"></image>
					<view class="informationBox">
						<view style="margin: 6rpx 0 20rpx 20rpx;">
							<!--     距离       -->
							<view v-if="!service.check.isNull(plotDetail.juli)" style="position:absolute;
                  right:10rpx;bottom:10rpx;
                  color: #7f8c8d;font-size: 27rpx;
                  font-weight: bold;">
								<text>
									{{ service.html.distanceText(plotDetail.juli) }}
								</text>
							</view>

							<!-- 上部分信息 -->
							<view style="position: relative;width: 98%;">
								<view>
									<text style="font-size: 40rpx;
                    font-weight: bold;
                    color: #2ed573;
                    letter-spacing: 3rpx;
                    display: inline-block;margin-bottom: 10rpx">
										{{ service.html.isNullToStr(plotDetail.plotName)}}
									</text>

									<view class="item">
										<uni-tag :text="item" :type="getType(index)" circle size="mini"
											v-for="(item,index) in plotDetail.label" :key="item.id"
											style="margin-right: 10rpx;font-size: 10rpx;"></uni-tag>
									</view>

									<view class="item">
										<text class="labelFont">区域:</text>
										<text class="contentFont">{{service.html.isNullToStr(region.name)}}</text>
									</view>

									<view class="item">
										<text class="labelFont">
											最低价:
										</text>
										<view style="display: inline-block">
											<u--text mode="price" color="#ffa502" size="18"
												:text="service.html.isNullToStr(minPrice,'计算失败')">
											</u--text>
										</view>

									</view>
									<view class="item">
										<text class="labelFont">面积:</text>
										<text class="contentFont" style="color: #95a5a6 !important;
                        font-weight: bold">
											{{service.check.arrItemIsNull([region.lon,region.wide]) ? '丢失'
                        : region.lon + "(长)×" + region.wide + "(宽) ㎡"}}
										</text>
									</view>
								</view>

								<view style="position: absolute;bottom: 8rpx;right: -8rpx;">
									<u--image :showLoading="true" :src="imgapi+plotDetail.avatar" width="100px"
										height="100px" radius="30px"
										@click="service.previewImg([imgapi+plotDetail.avatar])">
									</u--image>
								</view>
								<view class="my_line"></view>
							</view>


							<!--   下部分信息       -->
							<view>
								<view style="margin-bottom: 10rpx;">
									<view class="item">
										<text class="labelFont">
											电话:
										</text>
										<text class="contentFont" style="font-weight: bold;">
											{{ service.html.isNullToStr(plotDetail.phone) }}
										</text>
									</view>

									<view class="item">
										<text class="labelFont">
											地址:
										</text>
										<text class="contentFont">
											{{ service.html.isNullToStr(plotDetail.address) }}
										</text>
									</view>

									<view class="item">
										<text class="labelFont">
											押金:
										</text>
										<view style="display: inline-block">
											<u--text mode="price" color="#ffa502" size="18"
												:text="service.html.isNullToStr(plotDetail.deposit)">
											</u--text>
										</view>
									</view>
								</view>
								<view>
									<button style="margin-right: 10rpx" type="primary" @tap="callphone" plain
										size="mini">
										致电
									</button>
									<button type="primary" @tap="handleMapLocation" plain size="mini">
										导航
									</button>
								</view>
							</view>
						</view>
					</view>

					<!-- 套餐 -->
					<view class="center_horizontal package">
						<view class="informationBox">
							<view style="margin: 25rpx 20rpx;">
								<view class="tit">套 餐
									<view class="selsectPack" v-if="isSelect">已选 {{selectRentMeal.describe}}</view>
								</view>
								<uni-list>
									<uni-list-item class="chat-custom-text" @click="onClick(item)" showArrow clickable
										v-for="(item,index) in rentMeal" :key='item.id' :title="item.describe">
									</uni-list-item>
								</uni-list>
							</view>
						</view>
					</view>


					<u-modal showCancelButton="true" closeOnClickOverlay="true" confirmText="选择此套餐" :show="showPopup"
						:title="showRentMeal.describe + '  详情'" @cancel="showPopup = false" @close="showPopup = false"
						@confirm="surePack">
						<view>
							<view>
								<view>
									<text class="labelFont">
										租金:
									</text>
									<view style="display: inline-block">
										<u--text mode="price" color="#ffa502" size="18"
											:text="service.html.isNullToStr(showRentMeal.price,'计算失败')">
										</u--text>
									</view>
								</view>
								<view>
									<text class="labelFont">
										租期(天):
									</text>
									<text class="contentFont">
										{{showRentMeal.day}}
									</text>
								</view>
								<view style="margin:10rpx 0" v-if="!service.check.isNull(showRentMeal.remark)">
									<text class="labelFont">
										备注:
									</text>
									<text style="font-size: 25rpx">
										{{showRentMeal.remark}}
									</text>
								</view>
							</view>
						</view>
					</u-modal>

					<!-- 商品介绍 -->
					<view class="title">
						土地详情
					</view>
					<view class="center_horizontal" style="width:750rpx;">
						<view class="informationBox2">
							<view>
								<view style="margin-bottom: 15rpx;">
									<rich-text :nodes="plotDetail.content"></rich-text>
								</view>
							</view>
						</view>
					</view>
					<!-- 悬浮 -->

				</view>
				<!-- 底部栏 -->
				<view class="shopBottomBox">
					<view class="shareBox">
						<view style="position: absolute;bottom: -45rpx;left: 10rpx;">
							<image class="collectionimg"
								src="https://www.tdtye.com/files/vegetable_mall_file/default/static/share.png"></image>
							<view class="shopBottomText" style="margin-top: -60rpx;">
								分享
							</view>
						</view>
						<button class="sharebtn" open-type="share"></button>
					</view>

					<view class="zhongbox" @tap="tzVegetablesList(1)">
						我 要 租
					</view>
				</view>
			</block>
		</skeleton>
	</view>

</template>

<script>
	import dragButton from "@/components/drag-button/drag-button.vue";
	import cartcontrol from '@/components/cartcontrol.vue'
	import hqsPopup from "@/components/hqs-popup/hqs-popup.vue"
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import service from "@/utils/service";

	export default {
		components: {
			cartcontrol,
			dragButton,
			hqsPopup,
			Skeleton
		},
		data() {
			return {
				service: service,
				avatarUrl: '../../static/images/growVegetables/liuliang2.jpg',
				nickName: '礼盒山庄',
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				imgapi: '',
				plotDetail: {},
				tudiid: null,
				region: {},

				rentMeal: [], //套餐

				/* 显示套餐 */
				showRentMeal: {},

				/* 选中套餐 */
				selectRentMeal: null,

				showPopup: false, //弹窗
				item: null, //弹窗内容
				popHeight: '20vh', //弹窗高度
				minPrice: 0, //最低价格

				isSelect: false, //套餐是否选中
				totalRes: {}, //所有数据

				loading: true,
				skeleton: [
					'card-lg',
					'square+line*2+square',
					'line',
					'line*3+line*2',
					40,
					'line*3',
					40,
					'line',
					'card-lg',
				], //骨架屏
			}
		},
		onLoad(e) {
			//土地详情id	
			this.imgapi = this.$reqConfig.URLIMAGE
			this.tudiid = e.id
			this.getDetail(e.juli);
			//分享进来的，渲染完成后判断是否登录过，没有登录就跳去登录
			let token = uni.getStorageSync("token")
			let avatarUrl = uni.getStorageSync("avatarUrl")
			if (!token || !avatarUrl) {
				uni.navigateTo({
					url: "../mine/loginPage"
				})
			}
		},
		methods: {

			// 套餐确认
			surePack() {
				this.isSelect = true //展示选中
				this.selectRentMeal = this.showRentMeal;
				this.showPopup = false //关弹窗
			},
			// 弹窗显示
			onClick(item) {
				this.showPopup = true
				this.showRentMeal = item
			},

			// 跳转商品列表
			tzShopList() {
				uni.navigateTo({
					url: `./shopList?id=${this.plotDetail.rawMerchantId}`
				})
			},
			// 跳转租赁订单
			tzVegetablesList(type) {
				if (service.check.isNull(this.selectRentMeal)) {
					uni.showToast({
						title: "请选择套餐",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				this.selectRentMeal.type = 1


				this.plotDetail.nameTit = this.region.name
				this.plotDetail.regionLon = this.region.lon
				this.plotDetail.regionWide = this.region.wide
				uni.setStorageSync('plotDetail', JSON.stringify(this.plotDetail));
				uni.navigateTo({
					url: './woyaozuOrder?item=' + JSON.stringify(this.selectRentMeal)
				})
			},
			// 打电话
			callphone() {
				uni.makePhoneCall({
					phoneNumber: this.plotDetail.phone //仅为示例
				});
			},
			// 导航
			handleMapLocation() {
				console.log('进入导航 : ', this.plotDetail)
				service.handleMapLocation(this, this.plotDetail.lat, this.plotDetail.lng, this.plotDetail.address)
			},
			getType(index) {
				switch (index) {
					case 0:
						return "success"
					case 1:
						return "default"
					case 2:
						return "warning"
					case 3:
						return "error"
				}
			},

			getDetail(juli) {
				//请求
				let _t = this;
				this.$axios({
					url: "user/public/regionDetail",
					method: "post",
					data: {
						id: _t.tudiid
					}
				}).then((res) => {
					this.plotDetail = res.result.plot
					this.plotDetail.content = this.plotDetail.content.replace(/src="/gi,
						'src=' + '\"' + this.imgapi)
					this.plotDetail.label = JSON.parse(this.plotDetail.label)
					this.region = res.result.region
					this.rentMeal = res.result.rentMeal

					// 价格最小
					let pri = res.result.rentMeal.map(val => val.price)
					this.minPrice = Math.min(...pri)
					// 总共res
					this.totalRes = res.result
					// 骨架屏取消
					this.loading = false;
					this.plotDetail.juli = juli
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.selsectPack {
		font-size: 30rpx;
		color: #808080;
		display: inline-block;
		margin-left: 20rpx;
	}

	.fontColor {
		color: #a0a2a7;
		display: inline-block;
	}

	.mini-btn {
		width: 100%;
		margin-right: 35rpx;
		border-radius: 50rpx;
		background-color: rgb(60, 197, 31);
	}

	.desc {
		padding-left: 20rpx;

	}

	.futext {
		color: rgb(143, 147, 156);
		font-size: 35rpx;
		font-weight: normal;
		white-space: nowrap;
	}

	.informationBox .tit {
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.package {
		margin-top: 100rpx;
	}

	.package-list view {
		padding-left: 0;
	}

	.uni-list-item__container {
		padding-left: 0;
	}

	.vertical_end {
		justify-content: flex-end;
	}

	.movable-area {
		width: 100%;
		height: calc(100vh - 100rpx);
		position: fixed;
		top: 0;
		z-index: 0;
		pointer-events: none;
	}

	.shareBox {
		width: 60rpx;
		height: 80rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.sharebtn {
		position: absolute;
		height: 80rpx;
		width: 60rpx;
		z-index: 99;
		opacity: 0.1;
		background-color: #fff;
	}

	.movable-view {
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		top: 70%;
		left: 730rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		text-align: center;
		opacity: 0.7;
		background: #4CD964;
	}

	.topBox {
		width: 100%;
		height: calc(100vh - 120rpx);
		/* overflow: auto; */
		margin-bottom: 20rpx;
	}

	.localImage {
		width: 750rpx;
		height: 400rpx;
	}

	.informationBox {
		/* height: 470rpx; */
		border-radius: 15rpx;
		width: 95%;
		margin: -80rpx auto 0 auto;
		background-color: #fff;
		position: relative;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		margin: 0 auto;
		background-color: #fff;
		margin-bottom: 120rpx;
	}

	.collectionimg {
		width: 35rpx;
		height: 35rpx;
	}

	.shopBottomText {
		font-size: 20rpx;
	}


	.shopBottomBox {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-around;
	}

	.shopBottomBoxleft {
		width: 35%;
		/* margin-top: 20rpx; */
		/* display: flex;
		align-items: center;
		justify-content: space-between; */
		text-align: center;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 30rpx;
		line-height: 60rpx;
		color: #808080;
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.detailsBox {
		height: 180rpx;
		width: 750rpx;
		padding: 20rpx 0;
		display: flex;
	}

	.zhaibox {
		width: 50%;
		background-color: #F0AD4E;
		text-align: center;
		color: #fff;
	}

	.zhongbox {
		width: 100%;
		background-image: linear-gradient(to right, #3cc51f, #8be276);
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		margin: 10rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.title {
		width: 750rpx;
		text-align: center;
		font-size: 40rpx;
		margin: 35rpx 0;
		color: #3cc51f;
		font-weight: bold;
	}

	.item {
		margin-bottom: 4rpx;
	}

	.labelFont {
		padding-right: 4rpx;
		letter-spacing: 0.1em;
		font-size: 28rpx;
		color: #7f8c8d;
	}

	.contentFont {
		font-size: 32rpx !important;
		letter-spacing: 2rpx !important;
		color: #222f3e !important;
	}

	.my_line {
		margin: 20rpx auto;
		width: 100%;
		border: solid 0.5rpx #bbb;
		background-color: #bbb;
	}
</style>